<template>
  <div>
    <div id="demo">
      <form id="search">Search <input name="query" v-model="searchQuery" /></form>
      <Griddings :heroes="gridData" :columns="gridColumns" :filter-key="searchQuery">
      </Griddings>
    </div>
  </div>
</template>

<script>
import "../assets/css/index.css";
import Griddings from "../components/Gridding_s";
export default {
  data() {
    return {
      searchQuery: "",
      gridColumns: ["name", "power"],
      gridData: [
        { name: "Chuck Norris", power: Infinity },
        { name: "Bruce Lee", power: 9000 },
        { name: "Jackie Chan", power: 7000 },
        { name: "Jet Li", power: 8000 },
      ],
    };
  },
  components: {
    Griddings,
  },
};
</script>

<style></style>
